<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
         trimDirectiveWhitespaces="true" %>
<!-- web헤더 -->
<style type="text/css">

    body {
        font-family: "나눔바른고딕";
    }

    ul {
        list-style: none;
    }

    header {
        height: 120px;
        background: lightgoldenrodyellow;
    }

    .logo {
        background: lightseagreen;
        margin: 0;
        height: 120px;
    }

    .logo img {
        margin-top: 25px;
    }

    .menu {
        height: 120px;
        background: lightgreen;
    }

    .qmenu {
        font-weight: bold;
        text-align: right;
    }

    #webBtn {
        width: 78px;
        height: 30px;
        margin-top: -7px;
        margin-left: 58px;
        background: url("/images/webBtn.png");
    }

    #offBtn {
        width: 78px;
        height: 30px;
        margin-top: -7px;
        margin-left: 20px;
        background: url("/images/offBtn.png");
    }

    .topMenu {
        padding-top: 25px;
    }

    .topMenu li {
        float: left;
    }

    #drop1, #drop2, #drop3, #drop4 {
        display: inline;
        font-size: 130%;
        padding-right: 50px;

    }


</style>
<header class="row">
    <div class="span3 logo">
        <a href="gate.do"><img src="images/logo.png" alt="pjlogo"/></a>
    </div>
    <div class="span9 menu">
        <ul class="inline qmenu">
            <li>MyPage</li>
            <li><a href="../join.jsp">회원가입</a></li>
            <li><a href="../login.jsp">로그인</a></li>
        </ul>
        <ul class="topMenu">
            <li class="dropdown">
                <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">노래방</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                    <li><a tabindex="-1" href="sing.jsp">노래방검색</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">예매</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                    <li><a role="menuitem" tabindex="-1" href="#">노래방예매</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">주차</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">주차현황</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" id="drop4" role="button" class="dropdown-toggle" data-toggle="dropdown">고객센터</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">공지사항</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">회사소개</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">이벤트</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Q&A</a></li>
                </ul>
            </li>
            <li>
                <button id="webBtn" type="button"></button>
            </li>
            <li>
                <button id="offBtn" type="button"></button>
            </li>
        </ul>
    </div>
</header>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/project.js"></script>

<script>
    $('.dropdown-toggle').dropdown();
</script>